<template>
	<view class="coupon">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop >= 0" :currentTab="currentTab" selectedColor="#5677fc" sliderBgColor="#5677fc" @change="change" itemWidth="50%"></tui-tabs>
		<view class="column coupon-list" v-if="couponList.length">
			<block :key="index" v-for="(item, index) in couponList">
				<view class="column coupon-box" @click="routerPage(item)">
					<image class="coupon-bg" src="/static/icons/coupon-bg.png"></image>
					<view class="coupon-item">
						<view class="coupon-item-left">
							<view class="f-center">
								<text style="font-size: 38upx;" class="coupon-name">{{ item.couponName }}</text>
								<text style="margin-left: 10upx;" class="coupon-name">(满{{ item.meetUseAmount }}减</text>
								<text class="coupon-num">{{ item.deductionAmount }}</text>
								<text class="coupon-name">元)</text>
							</view>

							<view class="coupon-time">
								<text>有效期至</text>
								<text class="ml10">{{ item.couponEffectiveTimeBegin }}-{{ item.couponEffectiveTimeEnd }}</text>
							</view>
						</view>
						<view @click="handleUse" v-if="currentTab == 0" class="coupon-item-right"><text class="coupon-button-use coupon-button">立即使用</text></view>
						<view v-else class="coupon-item-right"><text class="coupon-button-used coupon-button">已使用</text></view>
					</view>
				</view>
			</block>
		</view>
		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !couponList.length">暂无优惠券</tui-no-data>
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script>
import { couponListPage } from '@/service/coupon.js';

export default {
	data() {
		return {
			currentTab: 0,
			tabs: [
				{
					name: '未使用'
				},
				{
					name: '已使用'
				}
			],
			loading: false,
			couponList: [],
			param: {
				pageNum: 1,
				pageSize: 10,
				useFlag: 'n'
			}
		};
	},
	onLoad() {
		this.loadCouponList();
	},
	onPullDownRefresh() {
		this.param.pageNum == 1;
		this.loadCouponList();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.loadCouponList();
	},
	methods: {
		handleUse() {
			uni.navigateTo({
				url: '/pages/index/productList/productList'
			});
		},
		change({ index }) {
			this.currentTab = index;
			this.param.pageNum = 1;
			this.couponList = [];
			this.loadCouponList();
		},
		async loadCouponList() {
			try {
				this.loading = true;
				const resp = await couponListPage({ ...this.param, useFlag: this.currentTab == 0 ? 'n' : 'y' });
				resp.data = resp.data.map(v => {
					v.couponEffectiveTimeBegin = v.couponEffectiveTimeBegin.substr(0, 10);
					v.couponEffectiveTimeEnd = v.couponEffectiveTimeEnd.substr(0, 10);
					return v;
				});
				this.couponList = this.param.pageNum == 1 ? resp.data : [...this.couponList, ...resp.data];
				this.param.pageNum++;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			} finally {
				this.loading = false;
			}
		},

		routerPage({ state }) {
			if (state.txt !== '立即使用') return;
			uni.navigateTo({
				url: '/pages/index/ask/main/main'
			});
		}
	}
};
</script>

<style lang="scss">
view {
	display: flex;
	box-sizing: border-box;
}
.coupon-bg {
	width: 100%;
	height: 100%;
	// padding: 15upx 30upx;
}
.f-center {
	align-items: center;
}
.ml10 {
	margin-left: 10upx;
}
.column {
	flex-direction: column;
	align-content: center;
}
.coupon {
	min-height: 100vh;
	background-color: #f7f9fc;
	flex-direction: column;
}
.coupon-list {
	padding-top: 10upx;
	width: 750upx;
}
.coupon-box {
	position: relative;
	width: 750upx;
	height: 229upx;
	// background-image: url('/static/images/coupon-bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
	// padding: 15upx 0upx;
}
.coupon-item {
	position: absolute;
	width: 750upx;
	height: 199upx;
	padding: 0 60upx 40upx 60upx;
	align-items: flex-end;
	justify-content: space-between;
}

.coupon-item-left {
	flex-direction: column;
	width: 430upx;
	lines: 1;
	text-overflow: ellipsis;
}
.coupon-item-left .coupon-name {
	font-weight: bold;
	font-size: 34upx;
	/* font-size:36upx; */
	color: #323437;
}
.coupon-item-left .coupon-num {
	/* font-size:72upx; */
	font-size: 68upx;
	margin-left: 10upx;
	color: #00c29d;
	font-weight: bold;
	margin-right: 8upx;
}
.coupon-time {
	color: #66789c;
	font-size: 24upx;
}
.coupon-item-right .coupon-button {
	height: 60upx;
	line-height: 60upx;
	padding: 0 23upx;
	border-radius: 6upx;
	font-size: 26upx;
	font-weight: bold;
	align-items: center;
}
.coupon-button-use {
	border: 2upx solid #3291f9;
	color: #3291f9;
	background-color: #ffffff;
}
.coupon-button-used {
	border: 2upx solid #c1defd;
	color: #c1defd;
	background-color: #ffffff;
}
.coupon-button-guoqi {
	border: 2upx solid #dfdfdf;
	color: #dfdfdf;
	background-color: #ffffff;
}
.coupon-nodata {
	width: 750upx;
	height: 100vh;
	align-items: center;
	justify-content: center;
}
.coupon-nodata image {
	width: 60upx;
	height: 60upx;
}
.coupon-nodata text {
	color: #d0d7df;
	font-size: 32upx;
}
.list-type {
	box-sizing: border-box;
	z-index: 1000;
	display: flex;
	height: 80upx;
	position: fixed;
	width: 750upx;
	top: 0upx;
	left: 0;
	background-color: #ffffff;
	border-bottom: 1upx solid #fefefe;
	padding: 0 140upx;
	justify-content: space-between;
}
.list-type-active {
	color: #3291f9;
	font-size: 36upx;
	line-height: 80upx;
	height: 80upx;
	font-weight: bold;
	border-bottom: 5upx solid #45ceb3;
}
.list-type-txt {
	color: #323437;
	font-size: 30upx;
	line-height: 80upx;
	height: 80upx;
}
</style>
